<template>
    <ex-dialog width="1000px" class="ex-diolog" :title="title" :visible="visible" :close-on-click-modal="false"
        @closeDialog="handleClose">
        <div class="main">
            <el-form :model="queryParams" ref="queryParams" :inline="true">
                <el-form-item label="交易单号" prop="thirdOrderNo">
                    <el-input style="width: 440px;" v-model="queryParams.thirdOrderNo" placeholder="请输入交易单号" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
                </el-form-item>
            </el-form>
            <div class="listBox">
                <el-table v-loading="loading" :data="tabList" stripe border @selection-change="handleSelectionChange">
                    <el-table-column type="index" label="序号" width="55" align="center" fixed />
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column label="卡编号" align="center" prop="cardNo" :show-overflow-tooltip="true" />
                    <el-table-column label="退款金额" align="center" prop="refundMoney" :show-overflow-tooltip="true" />
                    <el-table-column label="卡状态" align="center" prop="status" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <dict-tag :options="statusLs" :value="scope.row.status" />
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="button_footer">
            <el-button type="primary" @click="submit" :loading="AgreeLoading">确认申请</el-button>
            <el-button @click="handleClose">取 消</el-button>
        </div>
    </ex-dialog>
</template>
<script>
import Loading from "@/components/Loading/index";
// api
import {
    equityCardLs,refundApply
} from "@/api/syFundManagement/zhuanReturn";
export default {
    components: {
        Loading,
    },
    props: {
        visible: Boolean,
        row: Object,
    },
    data() {
        return {
            labelWidth: "150px",
            inputWidth: "420px",
            title: "申请退款",
            loading: false,
            disabled: false,
            AgreeLoading: false,
            total: 0,
            queryParams: {
                thirdOrderNo: '',
            },
            rules: {
                rejectReason: [
                    { required: true, message: "请输入拒绝原因", trigger: ["change"] }
                ],
            },
            tabList: [],
            statusLs: [
                { id: '1', value: '待使用' }, { id: '2', value: '已使用' }, { id: '3', value: '退款处理中' }, { id: '4', value: '已退款' },
            ],
            customerCardIdList: [],//退卡数组
        };
    },
    computed: {},
    created() {
        this.getList()
    },
    mounted() {

    },
    computed: {},
    methods: {
        //取消
        handleClose(formName) {
            this.$emit("update:visible", false);
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.getList();
        },
        // 多选框选中数据
        handleSelectionChange(e) {
            this.customerCardIdList = e.map(item => item.customerEquityCardId)
            // this.single = selection.length !== 1
            // this.multiple = !selection.length
        },
        /** 查询数字权益卡购卡账单查询列表 */
        getList() {
            this.loading = true;
            equityCardLs(this.queryParams).then(response => {
                this.tabList = response.result;
                this.loading = false;
            });
        },
        //创建确定
        submit() {
            if(this.customerCardIdList.length==0){
                this.$message.error('请勾选需申请退款的卡')
                return
            }
            this.AgreeLoading = true
            var data = {
                customerCardIdList: this.customerCardIdList
            }
            refundApply(data).then(res => {
                setTimeout(() => {
                    this.handleClose()
                    this.$message.success('操作成功')
                    this.$emit('success')
                    this.AgreeLoading = false
                }, 1000);
            }).catch(() => {
                this.AgreeLoading = false
            })
        },

    }
};
</script>
<style lang="scss" scoped>
.ex-diolog {
    ::v-deep .ex--dialog--footer {
        border: none !important;
        padding: 0 !important;
    }

    ::v-deep .ex--dialog--main {
        padding: 10px 20px !important;
    }
}

.title {
    font-size: 18px;
    font-weight: bold;
    color: #1890ff;
    padding: 10px 0;
    border-bottom: 4px solid #1890ff;
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start;

    span {
        padding-top: 8px;
    }
}

.checkBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;

    .el-select {
        margin: 0 8px;
        width: 200px;
    }

    .el-input {
        width: 100px;
        margin: 0 8px;
    }

    .el-form-item {
        display: flex;
    }
}

.timeBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .el-input {
        width: 110px;
        margin: 0 8px;
    }

    span {
        margin: 0 8px;
    }
}

.inpBox {
    display: flex;
    justify-content: flex-start;

    // align-items: center;
    .blue {
        color: #1890ff;
        margin-top: 10px;
    }

    .el-input {
        width: 150px;
        margin: 0 8px;
    }

    .el-select {
        width: 150px;
    }

    ::v-deep .el-input-group__append {
        padding: 0 8px !important;
    }
}

.stockNum {
    margin: 8px 0 0 5px;
}

.tipsBox {
    margin: 14px 0;
    color: red;
}

.calculateBox {
    display: flex;
    justify-content: center;

    .biaoG {
        margin-right: 20px;
        border: 1px solid #dfe6ec;

        .head {
            display: flex;
            width: 400px;
            border-bottom: 1px solid #dfe6ec;

            div {
                display: flex;
                flex: 1;
                justify-content: center;
                align-items: center;
                font-size: 14px;
                color: #333;
                height: 50px;
            }

            div:first-child {
                border-right: 1px solid #dfe6ec;
            }
        }
    }
}

.statusBox {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 50px;

    .status {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 50px;

        .tips {
            margin-top: 20px;
        }
    }
}

.el-select {
    width: 100%;
}

.button_box {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.button_footer {
    display: flex;
    justify-content: center;
    padding: 10px 0 10px;
}
</style>
  